<template>
  <el-col :span="20" style="margin-left: 30px">
    <el-row :gutter="9">
      <!-- 用户搜索输入框 -->
      <el-col :span="4" style="display: flex; align-items: center">
        <span style="width:100px;">用户名</span>
        <el-input
          placeholder="请输入用户"
          v-model="queryForm.query.userName"
          style="margin-bottom: 10px"
          suffix-icon="el-icon-search"
        >
        </el-input>
      </el-col>
      <el-col :span="4" style="margin-left: 10px">
        <el-button type="primary" @click="initGroupUser(true)">搜索</el-button>
        <el-button type="info" plain @click="reSet">重置</el-button>
      </el-col>
      <el-col :span="2" style="float: right">
        <el-button type="warning" @click="addUser">添加用户</el-button>
      </el-col>
    </el-row>
    <!--告警分组下用户表格区域  -->
    <el-row :gutter="15">
      <hawk-table
        v-model="multipleSelection"
        :page="queryForm.page"
        :table-data="userList"
        :number="true"
        :options="[
          { key: 'userName', label: '用户名', width: '150' },
          { key: 'company', label: '所属公司', width: '150' },
          { key: 'department', label: '所属部门', width: '150' },
          { key: 'phone', label: '联系电话', width: '150' },
          { key: 'email', label: '邮箱地址', width: '200' },
          { key: 'handle', label: '操作' }
        ]"
      >
        <template #handle="{ row }">
          <span class="hawk-text-btn" @click="delUser(row)">移除</span>
        </template>
      </hawk-table>
      <!-- 用户表格底部分页和批量移除 -->
      <div class="bottom-btns">
        <div class="bottom-btns-left">
          <div class="bottom-btns-left-num">
            {{ multipleSelection.length }} 选择
          </div>
          <el-button type="hawkDelete" @click="multiDel">批量移除</el-button>
        </div>
        <!--告警分组下用户分页组件 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryForm.page.current"
          :page-sizes="[10, 20, 50, 100]"
          v-if="userList.length <= queryForm.page.size"
          :page-size="queryForm.page.size"
          layout=" prev, pager, next,sizes"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 添加用户 -->
      <add-group-user :groupId="groupId" ref="addGroup" @init="initGroupUser"></add-group-user>
    </el-row>
  </el-col>
</template>

<script type="text/javascript">
import addGroupUser from './addGroupUser.vue'
/*
 * @author 宋辉辉
 * @description 告警分组右侧用户组件
 * @api 后台接口地址
 * @since 2021年12月1日10:14:14
 * @update 代码更新时间
 * @modifier 修改人
 * @bug bug名称或无
 * @version v1.0.0
 */
import {getListUser,remUser} from '@/api/monitor/config/group'

export default {
  components: { addGroupUser },
  name: 'groupUserList',
  props: ['groupId'],
  data() {
    return {
      queryForm: {
        query: {
          userName: ''
        },
        page: {
          current: 1,
          size: 10
        }
      },
      userList: [],
      multipleSelection: [],
      total: 0
    }
  },
  watch: {
    groupId(val) {
      this.initGroupUser()
    }
  },
  methods: {
    addUser() {
      this.$refs.addGroup.addUser()
    },
    //重置用户搜索
    reSet() {
      this.queryForm = this.$options.data().queryForm
      this.initGroupUser()
    },
    // 批量移除用户
    multiDel() {
      if (this.multipleSelection.length > 0) {
        this.$confirm('是否移除所有选中用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(async () => {
            console.log(this.multipleSelection)
            let list = []
            this.multipleSelection.forEach(item => {
              list.push(item.id)
            })
            await remUser(this.groupId, list)
            if (this.multipleSelection.length == this.userList.length) {
              this.queryForm.page.current = this.queryForm.page.current - 1
              if (this.queryForm.page.current < 1) {
                this.queryForm.page.current = 1
              }
            }
            this.multipleSelection = []
            this.initGroupUser()
            this.$message.success('移除成功！')
          })
          .catch(() => {
            this.$message.info('已取消删除')
          })
      }
    },
    //移除单个用户
    delUser(row) {
      this.$confirm('此操作将移除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async () => {
          if (this.userList.length == 1) {
            this.queryForm.page.current = this.queryForm.page.current - 1
            if (this.queryForm.page.current < 1) {
              this.queryForm.page.current = 1
            }
          }
          await remUser(row.groupId, row.id)
          this.$message.success('移除成功！')
          this.initGroupUser()
        })
        .catch(() => {
          this.$message.info('已取消移除')
        })
    },
    //用户列表分页的尺寸改变
    handleSizeChange(val) {
      this.queryForm.page.size = val
      this.initGroupUser()
    },
    //用户列表分页的页码改变
    handleCurrentChange(val) {
      this.queryForm.page.current = val
      this.initGroupUser()
    },
    //获取对应告警分组下的用户列表，并传入分页
    async initGroupUser(type) {
      if (this.queryForm.query.userName == '' && type) {
        this.$message({
          type: 'warning',
          message: '请输入搜索信息！'
        })
        return
      }
      if (type) this.queryForm.page.current = 1
      const {records,total} = await getListUser(this.groupId, this.queryForm)
      this.userList = records
      this.total = total
    }
  }
}
</script>

<style scoped></style>
